
// 插件

var mySwiper = new Swiper ('.swiper', {
    autoplay:true,//自由切换
    loop: true, // 循环模式选项
    pagination :{
        el: '.swiper-pagination',
        clickable :true,
    },
    navigation: {
        nextEl: '.swiper-button-next',
        prevEl: '.swiper-button-prev',
    },
  })   
  
  


/**
 * 0.获取元素对象
 */
let contentLi = document.querySelectorAll('.content li');



/**
 * 1.API分类中
 * 需求:移入content li 改变背景47,126,233,图标颜色
 */
contentLi.forEach(function(dom,i){
    dom.addEventListener('mouseover',function(){
        //console.log(1);
        this.style.backgroundColor = 'rgb(47,126,233)'
        this.querySelector('img').src = `../imgs/api0${i+1}-c.svg`
    })

    dom.addEventListener('mouseout',function(){
        //console.log(2);
        this.style.backgroundColor = '#fff'
        this.querySelector('img').src = `../imgs/api0${i+1}.svg`
    })

 })


 /**
 * 2.助力行业巨头
 * 跑马灯思想
 * 
 * 需求:每个1000ms,清除picture上的激活样式,删除active    
 *              添加picture下的激活样式,添加active
 */
let picture = document.querySelectorAll('.picture')
console.log(picture);

//定义变量 
let num = 0;
setInterval(function() {
    //清除cont上的激活样式,删除active 
    picture[num].classList.remove('active')

    ++num;
    //判断,
    if(num === picture.length){
        num = 0;
    }
    //添加cont下的激活样式,添加active
    picture[num].classList.add('active')
},2000)







/**
 * 3.需求:窗口加载,当滚动到距离大于 1100 时,显示 topBtn 按钮
 * 事件类型:scroll
 */
let topBtn = document.querySelector('.topBtn')

window.addEventListener('scroll',function () {
    let  stop = this.document.documentElement.scrollTop;
    if (stop > 1100) {
        topBtn.style.display = 'block';
    }
})
/**
 * 4.需求:点击topBtn 按钮,返回顶部
 * 事件类型:click
 */
 topBtn.addEventListener('click',function () {
     window.scrollTo({
         top:0,
         behavior:'smooth'
     })
 })